import React, { useState, useEffect } from 'react'
import { connect } from 'react-redux'
import { Helmet } from 'react-helmet'
import Nav from './components/Nav'
import { getAreas } from 'api/base'
import './index.scss'
function Area(props) {
    const [areas, setAreas] = useState([])
    useEffect(async () => {
        let { data } = await getAreas()
        setAreas(data.filter((data) => data.id !== 99))
    }, [])
    return (
        <div className="area">
            <Helmet>
                <title>哔哩哔哩直播-分类</title>
            </Helmet>
            <Nav />
            <h5 className="item xxl live-top">全部分类</h5>
            <div className="flex wrap ">
                {areas.map((e) => (
                    <a
                        key={e.id}
                        href={`/live/list?pid=${e.id}&pname=${e.name}&areaid=&areaname=`}
                        className="classlink"
                    >
                        <img src={e.entrance_icon.src} alt="" className="area-pic" />
                        <div className="name">{e.name}</div>
                    </a>
                ))}
            </div>
        </div>
    )
}
export default connect(
    function mapStateToProps(state) {
        return state
    },
    function mapDispatchToProps(dispatch) {
        return { dispatch }
    }
)(Area)
